<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的学习 - 智能学习平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .navbar {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .stat-card {
            transition: all 0.3s;
            border: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        .course-card {
            transition: all 0.3s;
            border: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }
        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 2rem;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 80px;
            height: 3px;
            background-color: #007bff;
        }
        .progress-bar {
            transition: width 1s ease-in-out;
        }
        .course-img {
            height: 180px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fa fa-graduation-cap text-primary me-2"></i>
                智能学习平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/student/dashboard">我的学习</a>
                    </li>
                </ul>
                <div class="navbar-nav">
                    <span class="nav-item nav-link">欢迎，{{ user.name }}</span>
                    <a class="nav-link" href="/logout" onclick="event.preventDefault(); fetch('/logout').then(() => window.location.href='/')">
                        <i class="fa fa-sign-out me-1"></i>退出登录
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <h1 class="mb-4">我的学习</h1>

        <!-- 完课率图表 -->
        <div class="card mb-5">
            <div class="card-header">
                <h5 class="mb-0">课程完课率分布</h5>
            </div>
            <div class="card-body">
                <div class="chart-container text-center">
                    <img src="{{ chart_url }}" alt="个人完课率图表" class="img-fluid">
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="row mb-5">
            <div class="col-md-4 mb-3">
                <div class="stat-card bg-primary text-white h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h5 class="card-title">已学课程</h5>
                                <h2 class="card-text">{{ enrolled_courses | length }}</h2>
                            </div>
                            <i class="fa fa-book fa-3x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="stat-card bg-success text-white h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h5 class="card-title">已完成课程</h5>
                                <h2 class="card-text">
                                    {% set completed_courses = 0 %}
                                    {% for course in enrolled_courses %}
                                        {% set completed_modules = 0 %}
                                        {% for data in user_learning_data %}
                                            {% if data.course_id == course.id and data.completed %}
                                                {% set completed_modules = completed_modules + 1 %}
                                            {% endif %}
                                        {% endfor %}
                                        {% if completed_modules >= course.modules | length %}
                                            {% set completed_courses = completed_courses + 1 %}
                                        {% endif %}
                                    {% endfor %}
                                    {{ completed_courses }}
                                </h2>
                            </div>
                            <i class="fa fa-check-circle fa-3x"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="stat-card bg-warning text-dark h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h5 class="card-title">总体完课率</h5>
                                <h2 class="card-text">
                                    {% set total_modules = 0 %}
                                    {% set completed_modules = 0 %}

                                    {% for course in enrolled_courses %}
                                        {% set total_modules = total_modules + course.modules | length %}

                                        {% for data in user_learning_data %}
                                            {% if data.course_id == course.id and data.completed %}
                                                {% set completed_modules = completed_modules + 1 %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endfor %}

                                    {% if total_modules > 0 %}
                                        {{ (completed_modules / total_modules * 100)|round(1) }}%
                                    {% else %}
                                        0%
                                    {% endif %}
                                </h2>
                            </div>
                            <i class="fa fa-line-chart fa-3x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 我的课程 -->
        <section>
            <h2 class="section-title">我的课程</h2>
            {% if enrolled_courses %}
                <div class="row row-cols-1 row-cols-md-2 g-4">
                    {% for course in enrolled_courses %}
                    <div class="col">
                        <div class="course-card h-100">
                            <img src="https://picsum.photos/seed/course{{ course.id }}/600/400" class="course-img" alt="{{ course.title }}">
                            <div class="card-body">
                                <h5 class="card-title">{{ course.title }}</h5>
                                <p class="card-text text-muted">{{ course.description | truncate(150) }}</p>

                                <div class="progress mb-3">
                                    {% set completed = 0 %}
                                    {% for data in user_learning_data %}
                                        {% if data.course_id == course.id and data.completed %}
                                            {% set completed = completed + 1 %}
                                        {% endif %}
                                    {% endfor %}

                                    {% set total = course.modules | length %}
                                    {% set rate = 0 %}
                                    {% if total > 0 %}
                                        {% set rate = (completed / total * 100)|round(1) %}
                                    {% endif %}

                                    <div class="progress-bar {% if rate >= 80 %}bg-success{% elif rate >= 50 %}bg-warning{% else %}bg-danger{% endif %}"
                                         role="progressbar" style="width: {{ rate }}%" aria-valuenow="{{ rate }}" aria-valuemin="0" aria-valuemax="100">
                                        {{ rate }}%
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-primary">{{ course.difficulty }}</span>
                                    <a href="/course/{{ course.id }}" class="btn btn-primary">继续学习</a>
                                </div>
                            </div>
                            <div class="card-footer bg-transparent d-flex justify-content-between">
                                <small class="text-muted">课程评分: {{ course.rating }}</small>
                                <small class="text-muted">完课率: {{ course.completion_rate }}%</small>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-5">
                    <h4>您还没有选择任何课程</h4>
                    <a href="#recommendations" class="btn btn-primary mt-3">
                        <i class="fa fa-search me-2"></i>浏览推荐课程
                    </a>
                </div>
            {% endif %}
        </section>

        <!-- 推荐课程 -->
        <section class="mt-8" id="recommendations">
            <h2 class="section-title">为你推荐的课程</h2>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                {% for course in recommendations %}
                <div class="col">
                    <div class="course-card h-100">
                        <img src="https://picsum.photos/seed/rec{{ course.id }}/600/400" class="course-img" alt="{{ course.title }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ course.title }}</h5>
                            <div class="rating mb-2">
                                {% for i in range(5) %}
                                    {% if i < course.rating | int %}★{% else %}☆{% endif %}
                                {% endfor %}
                                <span class="text-dark">{{ course.rating }}</span>
                            </div>
                            <p class="card-text text-muted">{{ course.description | truncate(120) }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="badge bg-primary">{{ course.difficulty }}</span>
                                <a href="/course/{{ course.id }}" class="btn btn-outline-primary">查看详情</a>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent d-flex justify-content-between">
                            <small class="text-muted">报名人数: {{ course.enrollment_count }}</small>
                            <small class="text-muted">完课率: {{ course.completion_rate }}%</small>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </section>
    </div>

    <footer class="bg-dark text-white py-5 mt-8">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h5>关于我们</h5>
                    <p>智能学习平台致力于提供高质量的在线教育资源，助力每一位学习者成长。</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/" class="text-white">首页</a></li>
                        <li><a href="/login" class="text-white">登录</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>联系我们</h5>
                    <p>邮箱: contact@example.com</p>
                </div>
            </div>
            <div class="border-top pt-3 mt-4 text-center">
                <p>&copy; 2025 智能学习平台 版权所有</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
